<html>
  <head>
    <title>Calculate Hash</title>
    <link
      rel="stylesheet"
      href="../static/bootstrap.min.css"
    />
    <script src="../static/crypto-js.min.js"></script>
    <script src="/static/hash.js"></script>
  </head>
  <style type="text/css">
    .container {
      height: auto;
      min-width: 420px;
      background-color: rgba(226, 240, 220, 200);
      margin-top: 4rem;
      margin-bottom: 4rem;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    .line {
      width: 95%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
    }

    .label {
      width: 100px;
      margin-right: 10px;
      text-align: right;
    }

    .btn-area {
      width: 90%;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 20px;
    }
  </style>
  <body onload="onLoad()">
    <div class="container">
      <div class="line">
        <div class="label">区块:</div>
        <div class="input-group">
          <div class="input-group-prepend">
            <span
              class="input-group-text"
              id="basic-addon1"
              >#</span
            >
          </div>
          <input
            id="block"
            type="number"
            class="form-control"
            placeholder="block number"
            aria-label="block"
            value="1"
            onchange="calc()"
          />
        </div>
      </div>
      <div class="line">
        <div class="label">随机数:</div>
        <div class="input-group">
          <input
            id="random"
            type="number"
            class="form-control"
            placeholder="random number"
            aria-label="random"
            value="0"
            onchange="calc()"
          />
        </div>
      </div>
      <div
        class="line"
        style="align-items: flex-start"
      >
        <div class="label">数据:</div>
        <textarea
          id="data"
          class="form-control"
          aria-label="With textarea"
          style="min-height: 150px"
          onchange="calc()"
        ></textarea>
      </div>
      <div class="line">
        <div class="label">SHA256:</div>
        <div class="input-group">
          <textarea
            id="hash"
            type="text"
            class="form-control"
            placeholder="hash number"
            aria-label="hash"
            disabled="true"
            style="word-break: break-all; word-wrap: break-all; resize: unset"
          ></textarea>
        </div>
      </div>
      <div class="line">
        <div class="label">前几位为0？</div>
        <div class="input-group">
          <input
            id="int"
            type="number"
            class="form-control"
            placeholder="int"
            aria-label="int"
            value="3"
          />
        </div>
      </div>
      <div class="btn-area">
        <button
          id="btn"
          onclick="start()"
          type="button"
          class="btn btn-success"
        >
          Start!
        </button>
      </div>
    </div>
  </body>
</html>
